<template>
    <el-form ref="clueFormRef" :model="clue" label-width="5.2%" style="margin: auto;" :rules="clueRules">
        <el-form-item label="所属活动" prop="activityId">
            <el-input type="text" v-model="clue.activityDo.id" placeholder="请输入所属活动"/>
        </el-form-item>
        <el-form-item label="姓名" prop="fullName">
            <el-input type="text" v-model="clue.fullName" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="称呼" prop="appellation">
            <el-select v-model="clue.appellationDo.id" placeholder="请选择称呼"
                       @click="loadDic('appellation')">
                <el-option
                    v-for="item in appellationOptions"
                    :key="item.id"
                    :label="item.typeValue"
                    :value="item.id"
                    clearable/>
            </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input type="text" v-model="clue.phone" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="微信号" prop="weixin">
            <el-input type="text" v-model="clue.weixin" placeholder="请输入微信号"/>
        </el-form-item>
        <el-form-item label="QQ号" prop="qq">
            <el-input type="text" v-model="clue.qq" placeholder="请输入QQ号"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="clue.email" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input type="text" v-model="clue.age" placeholder="请输入年龄"/>
        </el-form-item>
        <el-form-item label="职业" prop="job">
            <el-input type="text" v-model="clue.job" placeholder="请输入职业"/>
        </el-form-item>
        <el-form-item label="年收入" prop="yearIncome">
            <el-input type="text" v-model="clue.yearIncome" placeholder="请输入年收入"/>
        </el-form-item>
        <el-form-item label="地址" prop="address">
            <el-input type="text" v-model="clue.address" placeholder="请输入地址"/>
        </el-form-item>
        <el-form-item label="是否需要贷款" prop="needLoan">
            <el-select v-model="clue.needLoanDo.id" placeholder="请选择是否需要贷款"
                       @click="loadDic('needLoan')">
                <el-option
                    v-for="item in needLoanOptions"
                    :key="item.id"
                    :label="item.typeValue"
                    :value="item.id"
                    clearable/>
            </el-select>
        </el-form-item>
        <el-form-item label="意向状态" prop="intentionState">
            <el-select v-model="clue.intentionStateDo.id" placeholder="请选择意向状态"
                       @click="loadDic('intentionState')">
                <el-option
                    v-for="item in intentionStateOptions"
                    :key="item.id"
                    :label="item.typeValue"
                    :value="item.id"
                    clearable/>
            </el-select>
        </el-form-item>
        <el-form-item label="意向产品" prop="intentionProduct">
            <el-select v-model="clue.intentionProductDo.id" placeholder="请选择意向产品"
                       @click="loadProduct()">
                <el-option
                    v-for="item in intentionProductOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    clearable/>
            </el-select>
        </el-form-item>
        <el-form-item label="线索状态" prop="state">
            <el-select v-model="clue.stateDo.id" placeholder="请选择线索状态"
                       @click="loadDic('clueState')">
                <el-option
                    v-for="item in stateOptions"
                    :key="item.id"
                    :label="item.typeValue"
                    :value="item.id"
                    clearable/>
            </el-select>
        </el-form-item>
        <el-form-item label="线索来源" prop="source">
            <el-select v-model="clue.sourceDo.id" placeholder="请选择线索来源"
                       @click="loadDic('source')">
                <el-option
                    v-for="item in sourceOptions"
                    :key="item.id"
                    :label="item.typeValue"
                    :value="item.id"
                    clearable/>
            </el-select>
        </el-form-item>
        <el-form-item label="线索描述" prop="description">
            <el-input type="text" v-model="clue.description" placeholder="请输入线索描述"/>
        </el-form-item>
        <el-form-item label="下次联系时间">
            <el-date-picker
                v-model="clue.nextContactTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择下次联系时间"
                class="datetime-picker"
                style="width: 10%;"
                clearable>
            </el-date-picker>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="clueSubmit()">提 交</el-button>
    <el-button type="primary" plain @click="goBack">返 回</el-button>
</template>

<script setup>
import {inject, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doGet, doPost, doPut} from "@/http/httpRequest.js";
import {showMessage} from "@/util/message.js";

// 路由对象，用于获取当前路由信息（参数、路径等）
let route = useRoute();
// 路由实例，用于页面导航操作（如跳转、返回等）
let router = useRouter();

// 响应式字典数据 - 用于表单下拉选择框
let appellationOptions = ref([]);      // 称呼选项列表（如先生/女士等）
let needLoanOptions = ref([]);         // 是否需要贷款选项列表
let intentionStateOptions = ref([]);   // 意向状态选项列表
let intentionProductOptions = ref([]); // 意向产品选项列表
let stateOptions = ref([]);            // 线索状态选项列表
let sourceOptions = ref([]);           // 线索来源选项列表

// 注入刷新函数 - 用于父子组件通信，触发父组件数据刷新
let flush = inject('flush');

// 线索表单数据对象，使用ref响应式包装
let clue = ref({
    ownerDo: {},          // 负责人信息对象（存储用户ID、姓名等）
    createByDo: {},       // 创建人信息对象
    editByDo: {},         // 最后编辑人信息对象
    activityDo: {},       // 所属活动信息对象（关联的市场活动）
    appellationDo: {},    // 称呼信息对象（存储称呼类型ID和名称）
    needLoanDo: {},       // 是否需要贷款信息对象
    intentionStateDo: {}, // 意向状态信息对象（如初步意向/强烈意向等）
    stateDo: {},          // 线索状态信息对象（如新建/跟进中/已转化等）
    sourceDo: {},         // 线索来源信息对象（如广告/推荐/自然流量等）
    intentionProductDo: {}// 意向产品信息对象（存储产品ID和名称）
});

// 组件挂载时执行的生命周期钩子
onMounted(() => {
    // 从路由参数中获取线索ID - 判断当前是否为编辑模式
    let clueId = useRoute().params.clueId;

    // 加载各类字典数据到对应选项列表
    loadDic('appellation');        // 加载称呼字典
    loadDic('needLoan');           // 加载是否需要贷款字典
    loadDic('intentionState');     // 加载意向状态字典
    loadProduct();                          // 加载产品列表
    loadDic('clueState');          // 加载线索状态字典
    loadDic('source');             // 加载线索来源字典

    // 如果存在线索ID，则加载对应线索详情数据（编辑模式）
    if (clueId) {
        loadClue(clueId);
    }
})

/**
 * 加载字典数据的通用函数
 * @param {string} typeCode - 字典类型编码（如'appellation'表示称呼字典）
 * 功能：根据类型编码从后端API获取字典数据，并存储到对应选项列表
 */
const loadDic = typeCode => {
    doGet('/api/dic/' + typeCode, {}).then(resp => {
        if (resp.data.code == 200) {
            // 根据字典类型将数据存储到对应的响应式选项列表
            switch (typeCode) {
                case 'appellation':
                    appellationOptions.value = resp.data.info;
                    break;
                case 'needLoan':
                    needLoanOptions.value = resp.data.info;
                    break;
                case 'intentionState':
                    intentionStateOptions.value = resp.data.info;
                    break;
                case 'clueState':
                    stateOptions.value = resp.data.info;
                    break;
                case 'source':
                    sourceOptions.value = resp.data.info;
                    break;
            }
        } else {
            showMessage(resp.data.msg, 'error'); // 字典加载失败提示
        }
    })
}

/**
 * 加载产品列表数据
 * 功能：从后端API获取产品信息，用于意向产品选择
 */
const loadProduct = () => {
    doGet('/api/productType', {}).then(resp => {
        if (resp.data.code == 200) {
            intentionProductOptions.value = resp.data.info;
        } else {
            showMessage(resp.data.msg, 'error'); // 产品加载失败提示
        }
    })
}

/**
 * 线索表单提交函数
 * 功能：处理新增/编辑线索的表单提交，根据是否存在ID自动切换POST/PUT请求
 */
const clueSubmit = () => {
    // 创建FormData对象用于表单提交（支持文件上传等二进制数据）
    let formData = new FormData();

    // 填充表单数据到FormData（按后端API要求的字段名）
    formData.append('activityId', clue.value.activityDo.id);
    formData.append('fullName', clue.value.fullName);
    formData.append('appellation', clue.value.appellationDo.id);
    formData.append('phone', clue.value.phone);
    formData.append('weixin', clue.value.weixin);
    formData.append('qq', clue.value.qq);
    formData.append('email', clue.value.email);
    formData.append('age', clue.value.age);
    formData.append('job', clue.value.job);
    formData.append('yearIncome', clue.value.yearIncome);
    formData.append('address', clue.value.address);
    formData.append('needLoan', clue.value.needLoanDo.id);
    formData.append('intentionState', clue.value.intentionStateDo.id);
    formData.append('intentionProduct', clue.value.intentionProductDo.id);
    formData.append('state', clue.value.stateDo.id);
    formData.append('source', clue.value.sourceDo.id);
    formData.append('description', clue.value.description);
    formData.append('nextContactTime', clue.value.nextContactTime);

    if (clue.value.id > 0) {
        // 存在ID时执行更新操作（PUT请求）
        doPut('/api/clue', formData).then(resp => {
            if (resp.data.code == 200) {
                showMessage(resp.data.msg, 'success'); // 更新成功提示
                router.push('/dashboard/clue'); // 跳转到线索列表页面
            } else {
                showMessage(resp.data.msg, 'error'); // 更新失败提示
            }
        })
    } else {
        // 不存在ID时执行新增操作（POST请求）
        doPost('/api/clue', formData).then(resp => {
            if (resp.data.code == 200) {
                showMessage(resp.data.msg, 'success'); // 新增成功提示
                router.push('/dashboard/clue'); // 跳转到线索列表页面
            } else {
                showMessage(resp.data.msg, 'error'); // 新增失败提示
            }
        })
    }
}

/**
 * 加载线索详情数据
 * @param {number} id - 线索ID
 * 功能：根据ID从后端获取线索详情，并填充到表单中（编辑模式使用）
 */
const loadClue = id => {
    doGet('/api/clue/' + id, {}).then(resp => {
        if (resp && resp.data.code == 200) {
            // 将获取的线索数据赋值给响应式对象，自动更新表单
            clue.value = resp.data.info;
        } else {
            showMessage(resp?.data?.msg || '加载线索失败', 'error');
        }
    })
}

/**
 * 返回上一页函数
 * 功能：通过路由实例的back方法实现页面回退导航
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>
.el-select {
    width: 10% !important;
}

.el-input {
    width: 10% !important;
}

.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>